<template>
<div>
    
    <div class="chain-link-bar-wrapper">
  		<el-breadcrumb separator-class="el-icon-arrow-right">
	  		<el-breadcrumb-item>智囊团管理</el-breadcrumb-item>
	  		<el-breadcrumb-item to="/expert">智囊列表</el-breadcrumb-item>
	  	</el-breadcrumb>  
	</div>

  

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>智囊列表</span>

      </div>

      <div class="app-diliver-10"></div>

      <div class="clearfix app-tabs-wrapper color-black-third">
        <span 
          :class="{'color-theme': page.checkStatus == ''}" 
          class="app-tab app-margin-r-40" 
          @click="selectTabStatus('')"
          >全部</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'NOT'}" 
          class="app-tab app-margin-r-40" 
          @click="selectTabStatus('NOT')"
          >未审核</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'PASS'}" 
          class="app-tab app-margin-r-40"
          @click="selectTabStatus('PASS')"
          >审核通过</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'FAIL'}" 
          class="app-tab app-margin-r-40"
          @click="selectTabStatus('FAIL')"
          >不通过</span>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>

      <div>
        <div class="app-display-inline app-margin-h-20">
          <span class="color-black-second font-size-text">关键字：</span>
          <el-input
            clearable
            placeholder="手机号 姓名"
            v-model="page.keyWord"
            style="width: 380px;"
              ></el-input>
        </div>

        <div class="app-display-inline app-margin-h-20">
          <SubmitButton
            type="primary" 
            plain
            icon="el-icon-search"
            :post-option="{
              url: searchUrl,
              data: page,
              callback: searchCB
            }"
            >搜索</SubmitButton>
        </div>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>
      
      <el-table :data="expertList" stripe border @sort-change="sortMethod" style="width: 100%" class="nc-table-btn-ctrl">
        <el-table-column type="index" :index="indexMethod">
        </el-table-column>
        
        <el-table-column
          label="智囊"
          >
          <template slot-scope="scope">
            <img :src="scope.row.avatar" class="app-list-head-img">
          </template>
        </el-table-column>

        <el-table-column
          label="会员">
          <template slot-scope="scope">
            <span>{{scope.row.real_name}}</span>
            <br>
            <span>{{scope.row.phone}}</span>
            &nbsp;&nbsp;
            <span v-if="scope.row.gender == null">未知</span>
            <span v-if="scope.row.gender == 'MALE'">男</span>
            <span v-if="scope.row.gender == 'FEMALE'">女</span>
          </template>
        </el-table-column>
        
        <el-table-column
          label="公司"
          width="300">
          <template slot-scope="scope">
            <span v-if="scope.row.companyName != null">{{scope.row.companyName}}</span>
            <br>
            <span v-if="scope.row.companyAddress != null">{{scope.row.companyAddress}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="标签"
          prop="tag">
        </el-table-column>

        <el-table-column
          label="申请时间"
          prop="apply_date_time_str">
        </el-table-column>

        <el-table-column
          label="审核状态">
          <template slot-scope="scope">
            <span class="text-bold color-warning" v-if="scope.row.check_status == 'NOT'">待审核</span>
            <span class="text-bold color-success" v-if="scope.row.check_status == 'PASS'">通过</span>
            <span class="text-bold color-danger" v-if="scope.row.check_status == 'FAIL'">未通过</span>
            <span v-if="scope.row.check_status_explain != null">
              <br>
              {{scope.row.check_status_explain}}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.check_status != 'PASS'"
              type="success" 
              plain 
              size="mini" 
              @click="checkStatusHandle(scope.row.id, 1)">通过</el-button>
            <el-button
              v-if="scope.row.check_status != 'FAIL'"
              type="warning" 
              plain 
              size="mini" 
              @click="checkStatusHandle(scope.row.id, 0)">不通过</el-button>
            

            <a class="" :href="'#/expert/detail/' + scope.row.id" target="_blank">
              <el-button
              plain 
              size="mini" 
              >详情</el-button>
            </a>
          </template>
        </el-table-column>
      </el-table>


      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>

    </el-card>	

    <CheckStatusEdit :is-show="checkStatusEditVisible" :expert-obj="editExpert" :check-yes="checkYes"></CheckStatusEdit>

  </div>
</template>

<script>
import NcButton from '../common/NcButton';
import SubmitButton from '../common/SubmitButton';
import CheckStatusEdit from './CheckStatusEditDialog';

import Api from '../../api/Api';
import ExpertApi from '../../api/ExpertApi';

import JsonKit from '../../kit/JsonKit';

import { mapGetters } from 'vuex';
//需要导入vuex的数据管理
import Store from '../../store/index.js'
export default {
	components: {
		NcButton,
		SubmitButton,
		CheckStatusEdit
	},
	data() {
		return {
			expertList: [],
			page: {
				checkStatus: '',
				keyWord: '',
				columnProp: '',
				columnOrder: '',
				pageNum: 1,
				pageSize: 10
			},

			checkStatusEditVisible: false,
			checkYes: 0,
			editExpert: {},

			searchUrl: ExpertApi.URL_LIST,
			
			role:''
		};
	},
	computed: {
		...mapGetters(['hasPerm'])
	},
	created() {
		this.getPage();

		this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
		this.role = Store.state.user.role;
	},
	beforeDestroy: function() {
		this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
	},
	methods: {
		sortMethod(column) {
			this.page.columnProp = column.prop;
			this.page.columnOrder = column.order;
			this.getPage();
		},
		searchCB(json) {
			this.expertList = json.list;
			this.setPage(json);
		},
		getPage() {
			ExpertApi.list(this.page, json => {
				this.expertList = json.list;
				this.setPage(json);
			});
		},
		pageNumChange(pageNum) {
			this.page.pageNum = pageNum;
			this.getPage();
		},
		pageSizeChange(pageSize) {
			this.page.pageSize = pageSize;
			this.getPage();
		},
		setPage(json) {
			this.page.pageNum = json.pageNum;
			this.page.pageSize = json.pageSize;
			this.page.totalRow = json.totalRow;
		},
		indexMethod(index) {
			return index + 1 + (this.page.pageNum - 1) * this.page.pageSize;
		},
		selectTabStatus(checkStatus) {
			this.page.checkStatus = checkStatus;
			this.page.pageNum = 1;
			this.getPage();
		},
		checkStatusHandle(expertId, checkYes) {
			this.editExpert = JsonKit.getOf(this.expertList, 'id', expertId, null);
			this.checkYes = checkYes;
			this.checkStatusEditVisible = true;
		},
		hideEditDialog(isSuccess) {
			this.checkStatusEditVisible = false;
			this.editExpert = {};

			if (isSuccess) {
				this.getPage();
			}
		}
	}
};
</script>
